<template>
    <div>
        <div><h1>用户抽奖页面</h1></div>
        <div><h1>活动名称：{{activeInfo.activeName}}</h1></div>
        <div><h1>活动开始时间：{{activeInfo.beginTime}}</h1></div>
        <div><h1>活动结束时间：{{activeInfo.endTime}}</h1></div>
        <div><h1>活动积分：{{activeInfo.payScore}}</h1></div>
        <div><h1>活动免费次数：{{activeInfo.freeTimes}}</h1></div>
        <div><h1><span style="color: red;">活动状态：{{activeInfo.activeStatus==0?'活动正常':'活动结束'}}</span></h1></div>

        <div>
            <el-button type="primary" :disabled="activeInfo.payScore>userInfo.userScore" @click="onJoinScoreActive">积分抽奖</el-button>
            <el-button type="primary" v-if="activeInfo.winFlag==0 && activeInfo.winRecord==0" @click="onShowRecord">中奖名单</el-button>
            <el-button type="primary" v-if="activeInfo.winFlag==0 && activeInfo.winRecord==0" @click="onShowProd">中奖奖品</el-button>

        </div>
    </div>
</template>

<script setup lang="ts">
import { getActiveById,joinActiveByScore } from "@/api/win";
import { getUserInfo } from "@/api/api";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter(); // 导入路由对象，用于页面跳转

const activeInfo = ref({
    activeId: 0, // 活动id
    payScore: 0, // 支付积分
    activeName: '', // 活动名称
    beginTime: '', // 开始时间
    endTime: '', // 结束时间
    freeTimes: 0, // 免费次数
    winFlag: 0, // 中奖标识
    winRecord: 0, // 中奖记录
    activeStatus: 0, // 活动状态
});
const activeId = ref(0);
const userInfo = ref({
    userId: 0, // 用户id
    userName: '', // 用户名称
    userScore: 0, // 用户积分
});

const onShowRecord = () => {
    console.log("onShowRecord");
    ElMessage.success("中奖名单");
    router.push('/home/record')
}

const onShowProd = () => {
    console.log("onShowProd");
    ElMessage.success("中奖奖品");
}

// 积分抽奖
const onJoinScoreActive = () => {
    console.log("onJoinScoreActive");
    joinActiveByScore(activeInfo.value.activeId).then((res) => {
        if (res.data.code == 200) {
            ElMessage.success(res.data.msg);
            console.log(res.data.data);
            // 重新加载用户信息和活动列表
            loadActiveInfo();
        }
        else {
            ElMessage.error(res.data.msg);
        }
    })
}

// 获取活动信息
const loadActiveInfo = () => {
    // 获取当前的用户信息
    getUserInfo().then((res) => {
        if (res.data.code == 200) {
            userInfo.value = res.data.data;
        }
    })

    getActiveById(activeId.value).then((res) => {
        if (res.data.code == 200) {
            activeInfo.value = res.data.data;
        }
    });
};

// 页面加载钩子函数
onMounted(() => {
    // 获取活动ID
    activeId.value = sessionStorage.getItem("activeId");
    console.log('activeId',activeId.value);
    
    // 加载活动信息
    loadActiveInfo();
})

</script>

<style scoped>

</style>